<template>
 <div class="layout">
        <!-- 左侧 -->
        <div class="aside">
            <!-- 左侧组件 -->
            <common-aside />
        </div>
        <!-- 右侧 -->
        <div class="right">
            <div class="header">
                <common-header/>
            </div>
            <div class="main">
                <router-view></router-view>
            </div>
        </div>
    </div>

</template>

<script>
import CommonAside from '../components/CommonAside.vue';
import CommonHeader from '../components/CommonHeader.vue';
//import MyAside from '../components/MyAside.vue';
const options = {
    data() {
        return {}
    },
    components: {
        CommonAside,
        CommonHeader
    }
}
export default options
</script>

<style lang="less" scoped>
.layout{
    .aside {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 250px;
        background: #ebeef2;
    }

    .header{
        position: fixed;
        background-color: #ebeef2;
        top: 0px;
        left: 249px;
        height: 70px;
        right: 0px;
        width: auto;
    }
    .main{
        position: fixed;
        top: 70px;
        bottom: 0px;
        right: 0px;
        left: 270px;
    }
}
</style>
